<template>
    <div style="display: flex;flex-direction: row;flex-wrap: wrap;">
        <div style="margin-left: -10px;margin-top: -20px;" v-for="a in tableData">
            <div style="width: 170px;height: 300px;margin-top: -5px;margin-left: 17px;">
                <p style="font-size: 10px;">{{a.title}}</p>
                <el-image style="width: 162px; height: 250px" :src="a.imgUrls" @click = "detail(a.id)" />
            </div>
        </div>
    </div>
  <RouterView />
</template>

<style scoped>

</style>
<script setup>
import { ref,onMounted} from "vue";
// 显示全部数据
const tableData =ref([])
const query = ()=>{
    fetch("http://localhost:3000/categories/3?_embed=articles",{
        method:'get'
    }).then(response=>response.json()).then((data)=>{
        tableData.value = data.articles
    })
}
onMounted(()=>{
    query()
})

import { useRouter } from 'vue-router';
const router1 = useRouter();
const detail = (id) => {
  // 如果是内部路由跳转 (Vue Router)
  router1.push({path:'/meishiNeirong',query:{myid:id}})


};
</script>